<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风速监测站点地图演示</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background-color: #0a1323;
            color: white;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #4db6ac;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .description {
            color: #a0a0a0;
            margin-bottom: 30px;
        }
        
        .map-container {
            position: relative;
            background-color: #0c1633;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            height: 600px;
            margin-bottom: 30px;
        }
        
        .controls {
            display: flex;
            margin-bottom: 20px;
            background-color: #14213d;
            padding: 15px;
            border-radius: 8px;
            justify-content: space-between;
        }
        
        .control-group {
            display: flex;
            align-items: center;
        }
        
        .btn {
            background-color: #3a506b;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        
        .btn:hover {
            background-color: #4d648d;
        }
        
        .btn-primary {
            background-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
        }
        
        .btn-warning {
            background-color: #f39c12;
        }
        
        .btn-warning:hover {
            background-color: #e67e22;
        }
        
        .btn-danger {
            background-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
        }
        
        .station-details {
            background-color: #14213d;
            padding: 20px;
            border-radius: 8px;
            display: none;
        }
        
        .station-details h2 {
            color: #4db6ac;
            margin-top: 0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .station-details h2 .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 10px;
            display: inline-block;
        }
        
        .status-online {
            background-color: #2ecc71;
        }
        
        .status-warning {
            background-color: #f39c12;
        }
        
        .status-danger {
            background-color: #e74c3c;
        }
        
        .status-offline {
            background-color: #95a5a6;
        }
        
        .station-info {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .info-card {
            background-color: #1e293b;
            padding: 15px;
            border-radius: 6px;
        }
        
        .info-card h3 {
            margin-top: 0;
            color: #a0a0a0;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .info-card p {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }
        
        .wind-history {
            background-color: #1e293b;
            padding: 15px;
            border-radius: 6px;
            height: 200px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 1000;
            transition: transform 0.3s, opacity 0.3s;
            transform: translateY(-10px);
            opacity: 0;
        }
        
        .notification.show {
            display: block;
            transform: translateY(0);
            opacity: 1;
        }
        
        .notification.warning {
            border-left: 4px solid #f39c12;
        }
        
        .notification.danger {
            border-left: 4px solid #e74c3c;
        }
        
        .notification.info {
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>风速监测站点分布地图</h1>
            <div class="description">
                <p>本地图展示了风速监测站点的分布情况和实时风速数据，点击站点可查看详细信息。</p>
            </div>
        </header>
        
        <div class="controls">
            <div class="control-group">
                <button id="addStationBtn" class="btn btn-primary">添加站点</button>
                <button id="updateDataBtn" class="btn">更新数据</button>
                <button id="toggleAnimationBtn" class="btn">动画效果</button>
            </div>
            <div class="control-group">
                <button id="resetViewBtn" class="btn">重置视图</button>
            </div>
        </div>
        
        <div id="map-container" class="map-container"></div>
        
        <div id="station-details" class="station-details">
            <h2><span id="station-status-indicator" class="status-indicator"></span><span id="station-name"></span></h2>
            <div class="station-info">
                <div class="info-card">
                    <h3>位置</h3>
                    <p id="station-location"></p>
                </div>
                <div class="info-card">
                    <h3>当前风速</h3>
                    <p id="station-wind-speed"></p>
                </div>
                <div class="info-card">
                    <h3>状态</h3>
                    <p id="station-status"></p>
                </div>
            </div>
            <div class="wind-history">
                <h3>风速变化历史</h3>
                <div id="wind-history-chart" style="width: 100%; height: 170px;"></div>
            </div>
        </div>
    </div>
    
    <div id="notification" class="notification">
        <span id="notification-text"></span>
    </div>
    
    <script src="svgMap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化站点数据
            const initialStationData = {
                'A': { id: 'A', name: '站点A', location: '北部山区', status: 'online', windSpeed: 5.2 },
                'B': { id: 'B', name: '站点B', location: '南部平原', status: 'online', windSpeed: 1.3 },
                'C': { id: 'C', name: '站点C', location: '东部沿海', status: 'warning', windSpeed: 8.7 },
                'D': { id: 'D', name: '站点D', location: '中部平原', status: 'offline', windSpeed: 0 },
                'E': { id: 'E', name: '站点E', location: '西部平原', status: 'online', windSpeed: 3.5 },
                'F': { id: 'F', name: '站点F', location: '南部沿海', status: 'danger', windSpeed: 15.8 },
                'G': { id: 'G', name: '站点G', location: '东部山区', status: 'online', windSpeed: 7.2 }
            };
            
            // 创建地图
            const mapContainer = document.getElementById('map-container');
            const svgMap = createSVGMap('map-container', initialStationData, {
                width: mapContainer.clientWidth,
                height: mapContainer.clientHeight,
                onStationClick: handleStationClick
            });
            
            // 随机生成风速历史数据
            function generateHistoricalData(baseSpeed, hours = 24) {
                const data = [];
                const now = new Date();
                
                for (let i = hours; i >= 0; i--) {
                    const time = new Date(now);
                    time.setHours(now.getHours() - i);
                    
                    // 基于基础风速生成随机波动
                    const variance = baseSpeed * 0.3;
                    const randomFactor = Math.random() * variance * 2 - variance;
                    const value = Math.max(0, baseSpeed + randomFactor);
                    
                    data.push([time.toISOString(), parseFloat(value.toFixed(1))]);
                }
                
                return data;
            }
            
            // 初始化风速历史图表
            let windHistoryChart;
            
            function initWindHistoryChart() {
                const chartDom = document.getElementById('wind-history-chart');
                windHistoryChart = echarts.init(chartDom);
                
                const option = {
                    backgroundColor: 'transparent',
                    grid: {
                        left: '5%',
                        right: '5%',
                        top: '15%',
                        bottom: '15%'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function(params) {
                            const date = new Date(params[0].value[0]);
                            const formattedDate = date.toLocaleString('zh-CN', { 
                                month: 'numeric',
                                day: 'numeric',
                                hour: '2-digit',
                                minute: '2-digit'
                            });
                            return `${formattedDate}<br/>风速: ${params[0].value[1]} m/s`;
                        }
                    },
                    xAxis: {
                        type: 'time',
                        axisLine: {
                            lineStyle: {
                                color: '#4b5563'
                            }
                        },
                        axisLabel: {
                            color: '#a0a0a0',
                            formatter: function(value) {
                                const date = new Date(value);
                                return date.getHours() + ':00';
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: 'm/s',
                        nameTextStyle: {
                            color: '#a0a0a0'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#4b5563'
                            }
                        },
                        axisLabel: {
                            color: '#a0a0a0'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2d3748'
                            }
                        }
                    },
                    series: [{
                        type: 'line',
                        data: [],
                        showSymbol: false,
                        lineStyle: {
                            width: 3,
                            color: '#3498db'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(52, 152, 219, 0.5)' },
                                { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
                            ])
                        }
                    }]
                };
                
                windHistoryChart.setOption(option);
            }
            
            // 显示站点详情
            function handleStationClick(station) {
                const stationDetailsElement = document.getElementById('station-details');
                const stationNameElement = document.getElementById('station-name');
                const stationLocationElement = document.getElementById('station-location');
                const stationWindSpeedElement = document.getElementById('station-wind-speed');
                const stationStatusElement = document.getElementById('station-status');
                const stationStatusIndicator = document.getElementById('station-status-indicator');
                
                // 设置站点信息
                stationNameElement.textContent = station.name;
                stationLocationElement.textContent = station.location;
                stationWindSpeedElement.textContent = `${station.windSpeed} m/s`;
                
                // 设置状态和指示灯
                let statusText = '正常';
                let statusClass = 'status-online';
                
                if (station.status === 'warning' || (station.status === 'online' && station.windSpeed >= 8)) {
                    statusText = '警告';
                    statusClass = 'status-warning';
                } else if (station.status === 'danger' || (station.status === 'online' && station.windSpeed >= 12)) {
                    statusText = '危险';
                    statusClass = 'status-danger';
                } else if (station.status === 'offline') {
                    statusText = '离线';
                    statusClass = 'status-offline';
                }
                
                stationStatusElement.textContent = statusText;
                stationStatusIndicator.className = 'status-indicator ' + statusClass;
                
                // 初始化图表如果尚未初始化
                if (!windHistoryChart) {
                    initWindHistoryChart();
                }
                
                // 更新图表数据
                const historicalData = generateHistoricalData(station.windSpeed);
                windHistoryChart.setOption({
                    series: [{
                        data: historicalData
                    }]
                });
                
                // 显示站点详情
                stationDetailsElement.style.display = 'block';
                
                // 高亮站点
                svgMap.highlightStation(station.id);
                
                // 发送通知
                if (station.status === 'danger' || (station.status === 'online' && station.windSpeed >= 12)) {
                    showNotification(`${station.name} 风速达到危险水平: ${station.windSpeed} m/s`, 'danger');
                } else if (station.status === 'warning' || (station.status === 'online' && station.windSpeed >= 8)) {
                    showNotification(`${station.name} 风速处于警告水平: ${station.windSpeed} m/s`, 'warning');
                }
            }
            
            // 显示通知
            function showNotification(message, type = 'info') {
                const notification = document.getElementById('notification');
                const notificationText = document.getElementById('notification-text');
                
                notificationText.textContent = message;
                notification.className = 'notification ' + type;
                notification.classList.add('show');
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, 5000);
            }
            
            // 随机更新站点数据
            function updateRandomStationData() {
                const stationIds = Object.keys(initialStationData);
                const updatedData = {};
                
                // 随机选择1-3个站点更新
                const updateCount = Math.floor(Math.random() * 3) + 1;
                const shuffledStations = stationIds.sort(() => 0.5 - Math.random());
                
                for (let i = 0; i < updateCount; i++) {
                    const stationId = shuffledStations[i];
                    const currentData = initialStationData[stationId];
                    
                    // 随机调整风速 (±30%)
                    const variance = currentData.windSpeed * 0.3;
                    const newWindSpeed = parseFloat((currentData.windSpeed + (Math.random() * variance * 2 - variance)).toFixed(1));
                    
                    // 基于风速调整状态
                    let newStatus = 'online';
                    if (newWindSpeed >= 12) {
                        newStatus = 'danger';
                    } else if (newWindSpeed >= 8) {
                        newStatus = 'warning';
                    }
                    
                    // 有5%的概率站点离线
                    if (Math.random() < 0.05) {
                        newStatus = 'offline';
                    }
                    
                    updatedData[stationId] = {
                        ...currentData,
                        windSpeed: newWindSpeed,
                        status: newStatus
                    };
                    
                    // 更新初始数据以供下次更新使用
                    initialStationData[stationId] = updatedData[stationId];
                    
                    // 检查是否需要发送通知
                    if (newStatus === 'danger' && currentData.status !== 'danger') {
                        showNotification(`${currentData.name} 风速达到危险水平: ${newWindSpeed} m/s`, 'danger');
                    } else if (newStatus === 'warning' && currentData.status !== 'warning' && currentData.status !== 'danger') {
                        showNotification(`${currentData.name} 风速上升到警告水平: ${newWindSpeed} m/s`, 'warning');
                    }
                }
                
                // 更新地图
                svgMap.updateStationData(updatedData);
                
                return updatedData;
            }
            
            // 添加新站点
            function addNewStation() {
                const locationOptions = ['北部山区', '南部平原', '东部沿海', '中部平原', '西部平原', '南部沿海', '东部山区'];
                const randomLocation = locationOptions[Math.floor(Math.random() * locationOptions.length)];
                const randomWindSpeed = parseFloat((Math.random() * 15).toFixed(1));
                
                let status = 'online';
                if (randomWindSpeed >= 12) {
                    status = 'danger';
                } else if (randomWindSpeed >= 8) {
                    status = 'warning';
                }
                
                // 生成新站点ID (H, I, J, ...)
                const lastId = String.fromCharCode(
                    Math.max(...Object.keys(initialStationData).map(id => id.charCodeAt(0)))
                );
                const newId = String.fromCharCode(lastId.charCodeAt(0) + 1);
                
                const newStation = {
                    id: newId,
                    name: '站点' + newId,
                    location: randomLocation,
                    status: status,
                    windSpeed: randomWindSpeed
                };
                
                // 添加到初始数据
                initialStationData[newId] = newStation;
                
                // 添加到地图
                svgMap.addStation(newStation);
                
                // 显示通知
                showNotification(`新增站点 ${newStation.name} 已添加到地图上。`, 'info');
                
                return newStation;
            }
            
            // 初始化事件监听
            document.getElementById('updateDataBtn').addEventListener('click', function() {
                const updatedData = updateRandomStationData();
                showNotification(`已更新 ${Object.keys(updatedData).length} 个站点的数据。`, 'info');
            });
            
            document.getElementById('addStationBtn').addEventListener('click', function() {
                const newStation = addNewStation();
                svgMap.highlightStation(newStation.id);
            });
            
            document.getElementById('toggleAnimationBtn').addEventListener('click', function() {
                svgMap.addAnimation();
                showNotification('已添加动画效果。', 'info');
            });
            
            document.getElementById('resetViewBtn').addEventListener('click', function() {
                // 隐藏站点详情
                document.getElementById('station-details').style.display = 'none';
                showNotification('已重置视图。', 'info');
            });
            
            // 窗口大小变化时调整地图尺寸
            window.addEventListener('resize', function() {
                svgMap.resize(mapContainer.clientWidth, mapContainer.clientHeight);
                if (windHistoryChart) {
                    windHistoryChart.resize();
                }
            });
            
            // 启动自动更新
            setInterval(updateRandomStationData, 10000);
        });
    </script>
</body>
</html> 